<template>
  <div class="badReasons-container">
    <el-card shadow="never" style="margin-top: 16px;">
      <div slot="header" class="clearfix">
        <el-button style="float: right;" type="primary" @click="add" icon="el-icon-plus">新增</el-button>
      </div>
<!--      <header-help-doc :headContext="headContext"></header-help-doc>-->
      <el-alert type="success" show-icon :title="findTableTotal" :closable="false" style="margin: 12px 0 0 0 "></el-alert>
      <!--表格 -->
      <AzureDynamicTable :data="tableData" :column-des-objs="columnDesObjs" :show-seq="true"
                         :border="false"
      >
        <!--操作 -->
        <template slot="operator" slot-scope="{scope:{row,$index}}">
          <AButton type="primary" @click="edit({row})">修改</AButton>
          <AButton type="info"  @click="remove({row})">删除</AButton>
        </template>
      </AzureDynamicTable>
    </el-card>

    <!--新增 -->
    <el-dialog title="新增数据" :visible.sync="dialogAddVisible">
      <el-form :label-width="globalLabelWidth1" :model="addDetailForm" ref="addDetailFormData">
        <el-form-item label="不良原因大类">
            <el-input v-model="badReasonOptions" :disabled="true" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="不良原因细类名称">
          <el-input v-model="addDetailForm.Description" style="width: 50%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd('addDetailFormData')">确定</el-button>
      </div>
    </el-dialog>
    <!--编辑 -->
    <el-dialog title="修改数据" :visible.sync="dialogEditVisible">
      <el-form :label-width="globalLabelWidth1" ref="editFormData" :model="editForm">
        <el-form-item label="不良原因大类">
          <el-input style="width: 50%" v-model="badReasonOptions" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="不良原因细类编码" >
          <el-input style="width: 50%" v-model="editForm.ReasonDetailID" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="不良原因细类名称">
          <el-input style="width: 50%" v-model="editForm.Description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit('editFormData')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import AButton from '@/components/ATheFridayClub/AButton'
  import HeaderHelpDoc from '@/components/ATheFridayClub/HeaderHelpDoc'
  import Pagination from '@/components/Pagination/index'
  import {
    GetQcReasonDetail,
    AddQcReasonDetail,
    UpdateReasonDetail,
    DeleteReasonDteail,
    DeleteReason
  } from '@/api/badReasons'
  import { ERR_OK } from '@/utils/commons'
  import { getBadReasonsStatus } from '@/enums/basics'
  import  layoutMixin  from '@/mixins/layoutMixin'
  import  form  from '@/mixins/form'
  import { deepClone } from '@/utils'

  export default {
    name: 'badReasonsDetail',
    components: { AzureDynamicTable, Pagination,AButton,HeaderHelpDoc },
    mixins:[layoutMixin,form],
    data() {
      return {
        headContext:'对不良原因细类进行增删改查等等常规操作',
        tableData: [],
        columnDesObjs: [
          { label: '不良原因细类编码', key: 'ReasonDetailID' ,tag: true},
          { label: '不良原因大类', key: 'ReasonID' },
          { label: '不良原因细类名称', key: 'Description' },
          // { label: '状态', key: 'Status', filter: getBadReasonsStatus ,tag:true},
          { label: '创建人', key: 'CreateByMan' },
          { label: '创建时间', key: 'CreateTime' ,dateFormat:true},
          { label: '更新人', key: 'LastModifyMan' },
          { label: '更新时间', key: 'LastModifyTime',dateFormat:true },
          { label: '操作', key: 'operator', },
        ],
        addDetailForm:{
          ReasonDetailID:'',
          Description:'',
        },
        total:0,
        badReasonOptions:this.$route.query.badReasonName,
        ReasonId:parseInt(this.$route.query.ID),
        cellClickArray:[],
        editForm:{},
        searchKey: '',
        dialogAddVisible:false,
        dialogEditVisible:false,
      }
    },
    created() {
      this.getData()
    },
    computed:{
      findTableTotal(){
        return `成功查询到${this.total}条不良原因细类`
      }
    },
    methods: {
      getData() {
        GetQcReasonDetail({ReasonId:this.ReasonId })
          .then(({ Code, Result }) => {
            if (Code === ERR_OK) {
              this.tableData = Result;
              this.total = Result.length;
            }
          })
      },
      add() {
         this.dialogAddVisible = true
      },
      async submitAdd(){
        const {Code,Result} = await AddQcReasonDetail({data:this.addDetailForm,params:{inReasonId:this.ReasonId}})
          if(Code === ERR_OK){
            this.$message.success('新增细类成功！')
            this.dialogAddVisible = false
            this.getData();
          }
      },
      edit(row) {
        this.dialogEditVisible = true;
        this.editForm = deepClone(row.row)
      }
      ,
      async submitEdit(){
        try {
          await this.validateForm('editFormData')
          const {ReasonDetailID,Description} = this.editForm
          const {Code,Result} = await UpdateReasonDetail({ ReasonDetailID, Description})
          if(Code === ERR_OK){
            this.$message.success('修改成功！');
            this.dialogEditVisible = false;
            this.getData();
          }
        }catch (e) {
          console.log(e)
        }
      },
      remove(row) {
        this.$confirm('此操作将永久删除选中的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { ReasonDetailID } = row.row
          const { Code, Result } = await DeleteReasonDteail({ inQcReasonDetailId:ReasonDetailID })
          if (Code === ERR_OK) {
            this.$message.success('删除成功！')
            await this.getData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      clearInput(){
        this.getData();
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
